<template>
    <div class="app-container">
        <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
            <el-form-item label="用户名称" prop="userName">
                <el-input
                    v-model="queryParams.userName"
                    clearable
                    placeholder="请输入用户名称"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="手机号码" prop="phonenumber">
                <el-input
                    v-model="queryParams.phonenumber"
                    clearable
                    placeholder="请输入手机号码"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    v-hasPermi="['system:role:add']"
                    icon="el-icon-plus"
                    plain
                    size="mini"
                    type="primary"
                    @click="openSelectUser"
                >添加用户
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    v-hasPermi="['system:role:remove']"
                    :disabled="multiple"
                    icon="el-icon-circle-close"
                    plain
                    size="mini"
                    type="danger"
                    @click="cancelAuthUserAll"
                >批量取消授权
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    icon="el-icon-close"
                    plain
                    size="mini"
                    type="warning"
                    @click="handleClose"
                >关闭
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-row>
            <el-col :span="4">
                <!--科室树-->
                <dept-tree
                    ref="deptTree"
                    :excess-height="230"
                    :org-id="queryParams.orgId"
                    @treeClick="treeClick"
                />
            </el-col>
            <el-col :span="20" :xs="24">
                <el-table v-adaptive v-loading="loading" :data="userList" :stripe='true' border height="200px"
                          @selection-change="handleSelectionChange">
                    <el-table-column align="center" type="selection" width="55"/>
                    <el-table-column :show-overflow-tooltip="true" label="所属机构" prop="orgName"/>
                    <el-table-column :show-overflow-tooltip="true" label="用户名称" prop="userName"/>
                    <el-table-column :show-overflow-tooltip="true" label="用户昵称" prop="nickName"/>
                    <el-table-column :show-overflow-tooltip="true" label="邮箱" prop="email"/>
                    <el-table-column :show-overflow-tooltip="true" label="手机" prop="phonenumber"/>
                    <el-table-column align="center" label="状态" prop="status">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="创建时间" prop="createTime" width="180">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
                        <template slot-scope="scope">
                            <el-button
                                v-hasPermi="['system:role:remove']"
                                icon="el-icon-circle-close"
                                size="mini"
                                type="text"
                                @click="cancelAuthUser(scope.row)"
                            >取消授权
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination
                    v-show="total>0"
                    :limit.sync="queryParams.pageSize"
                    :page.sync="queryParams.pageNum"
                    :total="total"
                    @pagination="getList"
                />
            </el-col>
        </el-row>
        <select-user ref="select" @ok="handleQuery"/>
    </div>
</template>

<script>
import {
    allocatedUserList,
    authUserCancel,
    authUserCancelAll,
    allocatedDeptGroupUserList,
    deptGroupAuthUserCancel,
    deptGroupCancelAll
} from "@/api/system/role";
import selectUser from "./selectUser";

export default {
    name: "AuthUser",
    dicts: ['sys_normal_disable'],
    components: {selectUser},
    data () {
        return {
            // 登录用户信息
            userInfo: this.$store.state.user.userInfo,
            // 遮罩层
            loading: false,
            // 选中用户组
            userIds: [],
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 用户表格数据
            userList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                roleId: undefined,
                userName: undefined,
                phonenumber: undefined,
                // 角色或者科室分组跳转
                businessType: ''
            },
        };
    },
    created () {
        // 角色或者科室分组跳转
        const businessType = this.$route.params && this.$route.params.businessType;
        let roleId = ""
        let deptGroupId = ""
        if (businessType === '1') {
            roleId = this.$route.params && this.$route.params.id;
        } else {
            deptGroupId = this.$route.params && this.$route.params.id;
        }
        const orgId = this.$route.params && this.$route.params.orgId;
        this.queryParams.orgId = orgId
        this.queryParams.businessType = businessType
        if (roleId) {
            this.queryParams.roleId = roleId;
        } else if (deptGroupId) {
            this.queryParams.deptGroupId = deptGroupId
        }
        this.getList();
    },
    methods: {
        /** 查询授权用户列表 */
        getList () {
            this.loading = true;
            if (this.queryParams.businessType === '1') {
                allocatedUserList(this.queryParams).then(response => {
                        this.userList = response.rows;
                        this.total = response.total;
                        this.loading = false;
                    }
                );
            } else if (this.queryParams.businessType === '2') {
                allocatedDeptGroupUserList(this.queryParams).then(response => {
                        this.userList = response.rows;
                        this.total = response.total;
                        this.loading = false;
                    }
                );
            }

        },
        // 返回按钮
        handleClose () {
            const obj = {path: "/system/role"};
            this.$tab.closeOpenPage(obj);
        },
        /** 搜索按钮操作 */
        handleQuery () {
            this.queryParams.pageNum = 1;
            this.queryParams.deptId = ''
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery () {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange (selection) {
            this.userIds = selection.map(item => item.userId)
            this.multiple = !selection.length
        },
        /** 打开授权用户表弹窗 */
        openSelectUser () {
            this.$refs.select.show(this.queryParams);
        },
        /** 取消授权按钮操作 */
        cancelAuthUser (row) {
            if (this.queryParams.businessType === '1') {
                const roleId = this.queryParams.roleId;
                this.$modal.confirm('确认要取消该用户"' + row.nickName + '"角色吗？').then(function () {
                    return authUserCancel({userId: row.userId, roleId: roleId});
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("取消授权成功");
                }).catch(() => {
                });
            } else if (this.queryParams.businessType === '2') {
                const deptGroupId = this.queryParams.deptGroupId;
                this.$modal.confirm('确认要取消该用户"' + row.nickName + '"吗？').then(function () {
                    return deptGroupAuthUserCancel({userId: row.userId, deptGroupId: deptGroupId});
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("取消授权成功");
                }).catch(() => {
                });
            }
        },
        /** 批量取消授权按钮操作 */
        cancelAuthUserAll (row) {
            if (this.queryParams.businessType === '1') {
                const roleId = this.queryParams.roleId;
                const userIds = this.userIds.join(",");
                this.$modal.confirm('是否取消选中用户授权数据项？').then(function () {
                    return authUserCancelAll({roleId: roleId, userIds: userIds});
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("取消授权成功");
                }).catch(() => {
                });
            } else if (this.queryParams.businessType === '2') {
                const deptGroupId = this.queryParams.deptGroupId;
                const userIds = this.userIds.join(",");
                this.$modal.confirm('是否取消选中用户授权数据项？').then(function () {
                    return deptGroupCancelAll({deptGroupId: deptGroupId, userIds: userIds});
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("取消授权成功");
                }).catch(() => {
                });
            }
        },
        /** 左侧科室树节点点击事件 */
        treeClick (obj) {
            this.queryParams.deptId = obj.id
            this.getList()
        }
    }
};
</script>
